<template>
  <span class="menu-link">
    <i class="header-btn-icon el-icon-lock" @click="handleLock"></i>
    <ElementDialog title="设置锁屏密码" :visible.sync="box" width="30%" append-to-body>
      <ElForm ref="form" :model="form" label-width="80px">
        <ElFormItem label="锁屏密码" prop="passwd" :rules="[{ required: true, message: '锁屏密码不能为空' }]">
          <ElInput v-model="form.passwd" type="password" placeholder="请输入锁屏密码" />
        </ElFormItem>
      </ElForm>
      <template #footer>
        <span class="dialog-footer">
          <ElButton type="primary" @click="handleSetLock">确 定</ElButton>
        </span>
      </template>
    </ElementDialog>
  </span>
</template>

<script>
  import { mapMutations, mapState } from 'vuex'

  export default {
    name: 'TopLock',
    data() {
      return {
        box: false,
        form: {
          passwd: ''
        }
      }
    },
    computed: {
      ...mapState('common', ['lockPasswd'])
    },
    methods: {
      ...mapMutations('common', ['setLock', 'setLockPasswd']),
      handleSetLock() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.setLockPasswd({ lockPasswd: this.form.passwd })
            this.handleLock()
          }
        })
      },
      handleLock() {
        if (this.$isBlank(this.lockPasswd)) {
          this.box = true
          return
        }
        this.setLock({ lockPath: this.$route.fullPath })
        this.$router.push({ path: '/lockApp' })
      }
    }
  }
</script>
